<template>
    <div class="userinfo">
        <!-- <h2>账户信息查询</h2> -->
        <div class="title">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/layout/layoutshouye' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>账户信息</el-breadcrumb-item>
            <el-breadcrumb-item>账户信息查询</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="left fl">
            <ul>
                <li>
                    <span>账号:</span>
                    <span>{{userlist.userAccount}}</span>
                </li>
                <li>
                    <span>姓名:</span>
                    <span>{{userlist.userName}}</span>
                </li>
                <li>
                    <span>昵称:</span>
                    <span>{{userlist.Nickname}}</span>
                </li>
                <li>
                    <span>性别:</span>
                    <span>{{userlist.sex}}</span>
                </li>
                <li>
                    <span>注册时间:</span>
                    <span>{{userlist.userCreatetime}}</span>
                </li>
                <li>
                    <span>手机号:</span>
                    <span>{{userlist.userPhone}}</span>
                </li>
                <li>
                    <span>地址:</span>
                    <span>{{userlist.userAddress}}</span>
                </li>
                <li>
                    <span>信誉积分:</span>
                    <span>{{userlist.userCredit}}</span>
                </li>
            </ul>
        </div>
        <div class="right fr">
            <!-- 用户头像 -->
            <img :src="userlist.userImg" alt="">
        </div>
    </div>
</template>

<script>
// import { mapState,mapGetters } from "vuex";
// import axios from 'axios'
export default {
    name:"UserInfo",
    data() {
        return {
            userlist:[],
            timer:null
        }
    },
    created() {
        // this.getuserlist()
        this.getUser()
    },
    mounted() {
        
    },
    beforeDestroy() {
        clearTimeout(this.timer)
    },
    methods: {
        getUser(){
            this.timer = setTimeout(()=>{
                this.userlist = this.$store.state.user.userlist
                var tem = Number(String(this.userlist.userCreatetime).slice(11,13))+8
                var d = tem%24 >= 10? tem%24 :'0'+tem%24
                this.userlist.userCreatetime = String(this.userlist.userCreatetime).slice(0,10)+ ' ' +d + String(this.userlist.userCreatetime).slice(13,19)
                // axios.get("http://localhost:8080/api/userlist/getlist",{
                //   params:{
                //     id:1
                //   }
                // }).then(
                //   res=>{
                //     this.userlist = res.data[0]
                //     this.$bus.$emit('sendUserinfo',this.userlist.userAccount,this.userlist.userId)
                //     console.log("a",res)

                //   },
                //   error=>{
                //     console.log("b",error.message)
                //   }
                // )
            },100)
        }
    },
    computed:{
        userCreatetime(){
            if(this.userlist.userCreatetime){
                return this.userlist.userCreatetime.slice(0,10)
            }  
        }
    }
}
</script>

<style lang="less" scoped>
.userinfo {
  margin: 20px;
  width: 100%;
    .title{
      width: 95%;
      padding: 10px;
      background: #fff;
      border: 1px solid #eee;
      margin-bottom: 20px;
    }

    .left{
        width: 50%;
        height: 400px;

        ul{
            width: 100%;
            height: 100%;

            li{
                width: 70%;
                height: 30px;
                line-height: 30px;

                span:first-child{
                    width: 35%;
                    height: 100%;
                    float: left;
                    text-align: right;
                    padding-right: 5px;
                }
                span:last-child{
                    width: 65%;
                    height: 100%;
                    float: left;
                    text-align: left;
                }
            }

            li:nth-child(7){
                height: 60px;
            }
        }
    }
    .right{
        width: 50%;
        
        img{
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
    }
}
</style>